<template>
	<view class="container">
		<view class="title">
			个人中心
		</view>
		<!-- 头部 -->
		<view class="header">
			<view class="header-left">
				<image></image>
				<view class="header-left-content">
					<view class="unlogin"><text>未登录</text></view>
					<view class="lm-id">联盟ID：0</view>
				</view>
			</view>
			<view class="header-right">
				<image src="../../static/images/my/1.png" @click="handlerSetup('info')"></image>
				<image src="../../static/images/my/2.png" @click="handlerSetup('news')"></image>
				<image src="../../static/images/my/3.png" @click="handlerSetup('setup')"></image>
			</view>
		</view>
		<view class="main">
			
			<!-- 预估 -->
			<view class="estimate-box">
				<view class="estimate-top">
					<view class="estimate-top-left">
						<view>￥0</view>
						<text>本月预估</text>
					</view>
					<view class="estimate-top-right">
						<view>￥0</view>
						<text>上月预估</text>
					</view>
				</view>
				<view class="estimate-bottom">
					<view class="estimate-bottom-left">
						<text>今日预估</text>
						<view>￥0</view>
					</view>
					<view class="estimate-bottom-right">
						<text>昨日预估</text>
						<view>￥0</view>
					</view>
				</view>
			</view>
			
			<!-- nav -->
			<view class="nav-box">
				<view class="nav-item">
					<image src="../../static/images/my/4.png"></image>
					<view>账单</view>
				</view>
				<view class="nav-item">
					<image src="../../static/images/my/5.png"></image>
					<view>订单</view>
				</view>
				<view class="nav-item">
					<image src="../../static/images/my/6.png"></image>
					<view>运营</view>
				</view>
				<view class="nav-item">
					<image src="../../static/images/my/7.png"></image>
					<view>邀请</view>
				</view>
			</view>
			
			<!-- footer -->
			<view class="footer">
				<view class="footer-title">
					我的工具
				</view>
				<view class="nav-box">
					<view class="nav-item">
						<image src="../../static/images/my/8.png"></image>
						<view>常见问题</view>
					</view>
					<view class="nav-item">
						<image src="../../static/images/my/9.png"></image>
						<view>联系客服</view>
					</view>
					<view class="nav-item">
						<image src="../../static/images/my/10.png"></image>
						<view>个人商城</view>
					</view>
					<view class="nav-item">
						<image src="../../static/images/my/11.png"></image>
						<view>企业资质</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		methods: {
			handlerSetup(index){
				let pages = ""
				if(index == 'info'){
					pages = "/pages/my/info/index"
				}else if(index == 'news'){
					pages = "/pages/my/news/index"
				}else if(index == 'setup'){
					pages = "/pages/my/setup/index"
				}
				uni.navigateTo({
					url: pages
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		height: 100vh;
		font-size: 26rpx;
		background-color: #f1f1f1;
		.main{
			padding: 0 30rpx;
		}
		// background: linear-gradient(#d7e2f8 10%, #d7e2f8 30%);
		.title{
			text-align: center;
			color: #fff;
			font-size: 36rpx;
			padding: 50rpx 0;
			background-color: #d7e2f8;
		}
		.header{
			position: relative;
			padding: 0 30rpx 20rpx;
			background-color: #d7e2f8;
			.header-left{
				display: flex;
				image{
					width: 100rpx;
					height: 100rpx;
					border: 1px solid #ccc;
					margin-right: 20rpx;
				}
				.unlogin{
					font-size: 32rpx;
					font-weight: 600;
					margin: 10rpx 0;
				}
				.lm-id{
					color: #626c6e;
				}
			}
			
			.header-right{
				position: absolute;
				right: 10rpx;
				top: 25rpx;
				image{
					width: 50rpx;
					height: 50rpx;
					margin-right: 20rpx;
				}
			}
		}
		
		.estimate-box{
			background-color: #fff;
			border-radius: 10rpx;
			margin-top: 30rpx;
			.estimate-top{
				display: flex;
				border-bottom: 1px solid #ddd;
				text{
					color: #626c6e;
				}
				>view{
					width: 50%;
					text-align: center;
					padding: 30rpx 0;
					>view{
						font-weight: 700;
						margin-bottom: 8rpx;
					}
				}
			}
			.estimate-bottom{
				display: flex;
				>view{
					display: flex;
					justify-content: center;
					width: 50%;
					padding: 20rpx 0;
					text{
						font-size: 24rpx;
					}
					view{
						font-weight: 600;
						margin-left: 10rpx;
					}
				}
			}
		}
	
		.nav-box{
			display: flex;
			background: #fff;
			border-radius: 10rpx;
			margin-top: 30rpx;
			.nav-item{
				width: 25%;
				text-align: center;
				padding: 30rpx 0;
				image{
					width: 60rpx;
					height: 60rpx;
					margin-bottom: 16rpx;
				}
			}
			
		}
		
		.footer{
			background-color: #fff;
			border-radius: 10rpx;
			margin-top: 30rpx;
			.footer-title{
				font-size: 36rpx;
				font-weight: 600;
				padding: 30rpx;
			}
			.nav-box{
				margin-top: 0;
			}
		}
		
		
	}
</style>